* {
    margin: 0;
    padding: 0;
    list-style: none;
}

// 外层头部盒子
.headerBox {
    justify-content: space-between;
    text-align: center;
    align-items: center;
}

.headerBox_left {
    width: 220px;
    height: 60px;
    float: left;
}

.headerBox_center {
    width: 500px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-around;
}

.headerBox_center :hover {
    color: #2d60f6;
}

.BookmarkBar {
    width: 250px;
    height: 35px;
    color: #fff;
    line-height: 35px;
    border-radius: 10px;
    margin: 0 auto;
    background: #3172f6;
    position: fixed;
    left: 45px;
    top: 60px;
    z-index: 999;
}

.headerBox_right {
    float: right;
    width: 120px;
    height: 35px;
    text-align: center;
    // margin-left: 600px;
    position: relative;

    .headerBox_right_login {
        width: 100px;
        height: 35px;
        background: #2d60f6;
        margin: 0 auto;
        line-height: 35px;
        text-align: center;
        color: #fff;
        border-radius: 10px;

    }

    .headerBox_right_register {
        width: 300px;
        height: 45px;
        position: absolute;
        top: 40px;
        right: 10px;
        animation: floatUpDown 2s infinite;
        /* 应用动画并设置循环 */
    }
}

@keyframes floatUpDown {
    0% {
        transform: translateY(0);
        /* 初始状态：不偏移 */
    }

    50% {
        transform: translateY(-10px);
        /* 中间状态：向上偏移10像素 */
    }

    100% {
        transform: translateY(0);
        /* 结束状态：恢复原始位置 */
    }
}

// 头部
.dragDrop_header {
    display: flex;
    font-size: 14px;
    align-items: center;
    justify-content: space-between;

    .dragDrop_header_left {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 34%;
        height: 100%;
        padding-right: 100px;

        img {
            width: 120px;
            height: 25px;
        }
    }

    .dragDrop_header_center {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 40%;
        height: 100%;


        dl {
            width: 60px;
            margin-top: -35px;
            text-align: center;

            dt {
                height: 25px;
            }

            dd {
                height: 25px;
            }
        }
    }

    .dragDrop_header_right {
        display: flex;
        align-items: center;
        width: 50%;
        height: 100%;
        padding-left: 130px;

        button {
            height: 30px;
            outline: none;
            background: #fff;
            border: 1px solid #ccd5db;
            margin-left: 5px;
            padding: 5px;
            border-radius: 5px;
        }
    }
}

// 左中右
.dragDropBox {
    width: 100%;
    height: 100%;
    display: flex;

    .dragDropBox_left {
        width: 22%;

        .option {
            width: 100%;
            height: 100%;
            display: flex;

            .option_slider {
                width: 72px;
                height: 100%;
                border-right: 1px solid #ccd5db;

                dl {
                    width: 72px;
                    height: 72px;
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    align-content: center;
                    justify-content: space-evenly;
                }
            }
        }
    }

    .dragDropBox_center {

        width: 61%;
        height: 100%;
        padding: 36px 200px;
        background: #eef2f8;

        #box-canvas {
            position: relative;
            background-image: linear-gradient(#ccc 1px, transparent 1px), linear-gradient(90deg, #ccc 1px, transparent 1px) !important;
            background-size: 25px 25px !important;
            background-position: center center, center center !important;
            overflow: hidden;
            border: 1px solid #ccc;
        }

    }

    .dragDropBox_right {
        width: 17%;
        height: 100%;
    }
}

// 登录
.loginBox {
    height: 560px;
    display: flex;

    .loginBox_left {
        width: 280px;
        height: 100%;

        img {
            width: 100%;
            height: 100%;
        }
    }

    position: relative;

    .loginBox_right {
        width: 520px;
        height: 100%;


        .switchImages {
            display: flex;
            width: 100%;
            height: 70px;
            justify-content: flex-end;

            p {
                width: 100px;
                height: 25px;
                text-align: center;
                line-height: 25px;
                background: #f0f6ff;
                color: #2c73ff;
                margin-top: 20px;
            }
        }

        .wide-button {
            text-align: center;
            width: 370px;
            /* 或者你需要的具体宽度 */
        }

        .verification {
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 70px;

            .verification_account {
                color: #1261ff;
            }

            .verification_password:hover {
                color: #1261ff;

            }
        }
    }

    .loginBox_right_replace {
        position: absolute;
        top: 0;
        right: 0;
        width: 520px;
        height: 100%;
        display: none;

        .switchImages {
            display: flex;
            width: 100%;
            height: 70px;
            justify-content: flex-end;

            p {
                width: 100px;
                height: 25px;
                text-align: center;
                line-height: 25px;
                background: #f0f6ff;
                color: #2c73ff;
                margin-top: 20px;
            }
        }
    }

    .scanCode {
        display: flex;
        flex-direction: column;
        height: 300px;
        text-align: center;
        flex-wrap: nowrap;
        justify-content: space-evenly;

        .tabHeader {
            width: 402px;
            margin: 0 auto;
            display: flex;
            text-align: center;
            align-items: center;

            p {
                border: 1px solid #f2f4f5;
                width: 200px;
                height: 30px;
                line-height: 30px;
            }

            .active {
                background: #2c73ff;
                color: #fff;
            }
        }
    }

    .loginBox_right_QQ {
        position: absolute;
        text-align: center;
        bottom: 10px;
    }
}

.ant-modal .ant-modal-content {
    padding: 0;
}